<template>
  <div class="v-editor-initial-value-text-area g-jc-sb">
    <el-input
      v-model="inputvalue"
      class="g-one-line"
      :rows="1"
      :disabled="disabled"
      maxlength="20"
      @change="handelChange"
    ></el-input>
  </div>
</template>
<script lang="ts" setup>
import { modelService } from "@/modules/model/service";
import { ref, computed, watch, inject, Ref } from "vue";
import { propertyUtil } from "../../PropertyUtil";
import { PropertyRow } from "../../types";
import { BusEvent } from "@/constants/Enums";
import { desensitize } from "@/util/common";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

const emit = defineEmits<{
  (event: "quit-edit"): void;
}>();
/**
 * 单行输入框
 */
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
  encrypted?: boolean;
}>();
let inputvalue = ref<string>(props.encrypted ? desensitize(props.row.value) : (props.row.value as string));

const disabled = computed(() => {
  return props.row.readonly || isModelDisabled?.value || isRootProfile.value;
});

const isRootProfile = computed(() => {
  // 扩展包编辑，不允许修改正编辑的扩展包的名称
  if (app.activeProject?.config?.isProfile) {
    // 扩展包编辑，不允许修改正编辑的扩展包的名称
    const profileModelId = app.global.profileEditProjectIdMapModel.profileNameToProfileModelIdMap.get(
      app.activeProject?.config?.profileName
    ) as string;
    if (profileModelId === props.row.modelId) {
      return true;
    }
  }
  return false;
});

watch(
  () => props.row.value,
  newVal => {
    inputvalue.value = props.encrypted ? desensitize(newVal) : (newVal as string);
  }
);

const handelChange = async () => {
  const dto = propertyUtil.getUpdatePropertyDtoByPropertyRow(props.row, app.activeProject!.id);
  dto.value = inputvalue.value;
  dto.updateMethod = "updateNumberPartInitialValue";
  try {
    let res = await modelService.updateModelProperty(dto);
    if (res) {
      app.$bus.emit(BusEvent.REFRESH_POPERTY, props.row.modelId);
    }
  } catch (error) {
    const res = await modelService.getModelPropertiesByKey(app.activeProject!.id, props.row.modelId, props.row.key);
    inputvalue.value = res.value;
    error && console.error(error);
  } finally {
    emit("quit-edit");
  }
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let inModalEdit = false;

// function handleBlur() {
//   setTimeout(() => {
//     if (!inModalEdit) {
//       emit('quit-edit');

//     }
//   }, 200);
// }
</script>
<style lang="scss" scoped>
.v-editor-initial-value-text-area {
  height: auto;
  min-height: 24px;
  padding-left: 5px;
  align-items: center;
  > .img-btn {
    display: flex;
    align-items: center;
  }
  .el-input .el-input__inner {
    padding-right: 0px;
  }

  :deep(.el-textarea__inner, .el-input__inner) {
    resize: none;
    overflow: auto;
    text-overflow: ellipsis;
  }
  :deep(.el-input__wrapper) {
    background: transparent;
    padding-left: 0;
    box-shadow: none;
  }
}
</style>
